import React, {useState} from 'react'
import useURLLoader from "../hooks/useURLLoader";

const DogShowWithHook = () => {
    const style = {
        width: 200
    };
    const [ catType, setCatType ] = useState('1');
    const [ data, loading ] = useURLLoader(`https://api.thecatapi.com/v1/images/search?limit=1&category_ids=${catType}`);

    return (
        <>
            <div>
                {
                    loading
                        ? <p>猫猫读取中</p>
                        : <img src={data && (data.code === '-1' ? data.url : data[0].url)} alt='cat' style={style}/>
                }
            </div>
            <button onClick={() => {
                setCatType('1')
            }}>帽子</button>
            <button onClick={() => {
                setCatType('5')
            }}>盒子</button>
        </>
    )
};

export default DogShowWithHook;
